<template>
    <div>
        <div>
            <div class="header_box">
                <div>
                    <van-icon class="icon" name="arrow-left" @click="back" />
                </div>
                <div name="center">商品详情</div>
                <div name="right" @click="fenlei">分类</div>
            </div>

            <div>
                <van-tabs>
                    <!-- 搜索 -->
                    <div>
                        <form action="/">
                            <van-search
                                v-model="value"
                                show-action
                                placeholder="请输入搜索关键词"
                                @search="onSearch"
                                @cancel="onCancel"
                            />
                        </form>
                    </div>
                    <van-tab title="已上架" name="a">
                        <div>
                            <div class="left">
                                <van-row>
                                    <div>
                                        <!-- vant侧边导航 -->
                                        <van-tree-select
                                            height="55vw"
                                            :items="mainTypes"
                                            :main-active-index.sync="active"
                                            :style="{ minHeight: NewHeigh }"
                                            bind:click-nav="onClickNav"
                                            bind:click-item="onClickItem"
                                        >
                                            <template #content>
                                                <!-- right -->
                                                <div>
                                                    <div v-for="(item, index) in dataList" :key="index">
                                                        <van-row @click="onRightData(item.goodsId)">
                                                            <van-card
                                                                :num="item.goodsClassification"
                                                                :price="item.goodsInventory"
                                                                :desc="'月售' + item.shopStatus"
                                                                :title="item.chineseName"
                                                                thumb="图片"
                                                            >
                                                                <template #tags>
                                                                    <van-tag plain type="danger">{{
                                                                        item.goodsNumber
                                                                    }}</van-tag>
                                                                </template>
                                                            </van-card>
                                                        </van-row>
                                                    </div>
                                                </div>
                                            </template>
                                        </van-tree-select>
                                    </div>
                                </van-row>
                            </div>
                        </div>
                        <!-- dibu -->
                        <div>
                            <van-tabbar route>
                                <van-tabbar-item replace to="/CommodityMan/CommoditySort">商品排序</van-tabbar-item>
                                <van-tabbar-item replace to="/CommodityMan/takeDownView">批量下架</van-tabbar-item>
                                <van-tabbar-item>
                                    <van-popover
                                        placement="top"
                                        v-model="showPopover"
                                        theme="dark"
                                        trigger="click"
                                        :actions="actions"
                                        @select="onActive"
                                    >
                                        <template #reference>
                                            <van-button type="primary">发布商品</van-button>
                                        </template>
                                    </van-popover>
                                </van-tabbar-item>
                            </van-tabbar>
                        </div>
                    </van-tab>
                    <van-tab title="已下架" name="b">
                        <div>
                            <div>
                                <div class="p-2">
                                    <van-checkbox v-model="checkAllFlag" @change="checkAll" class="font-sm"
                                        >全选
                                    </van-checkbox>

                                    <div v-for="(item, index) in dataList" :key="index">
                                        <van-checkbox-group
                                            ref="checkboxGroup"
                                            v-model="CheckedAllArr"
                                            @change="handleChecked"
                                        >
                                            <van-checkbox :name="item.id" style="width: 100%">
                                                <van-row>
                                                    <van-card
                                                        :num="item.goodsClassification"
                                                        :price="item.goodsInventory"
                                                        :desc="'月售' + item.shopStatus"
                                                        :title="item.chineseName"
                                                        thumb="图片"
                                                    />
                                                </van-row>
                                            </van-checkbox>
                                        </van-checkbox-group>
                                    </div>
                                </div>
                            </div>
                            <!-- dibu -->
                            <van-tabbar>
                                <van-tabbar-item>
                                    <van-cell @click="showUp">批量上架</van-cell>
                                </van-tabbar-item>
                                <van-tabbar-item>
                                    <van-cell @click="showDel">批量下架</van-cell>
                                </van-tabbar-item>
                            </van-tabbar>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import { CommApi, outSuccess } from '../../https/Commit.js'
import { Dialog } from 'vant'
import { Toast } from 'vant'
import { mapMutations, mapState } from 'vuex'

export default {
    name: 'manageView',
    data() {
        return {
            active: 0,

            title: ['商品管理', '商品分类'],

            yeushou: '月售',

            show: false,
            value: '',

            showPopover: false,
            actions: [
                {
                    text: '扫描添加',
                    id: 0
                },
                {
                    text: '手动添加',
                    id: 1
                },
                {
                    text: '自动录入',
                    id: 2
                }
            ],
            height: '',
            NewHeigh: '',
            checkAllFlag: false, //全选判断标识
            CheckedAllArr: [], //全选数组,
            data: 1,
            // 第一个数组
            dataList: [],
            mainTypes: [
                {
                    id: 0,
                    text: '石磨肠粉'
                },
                {
                    id: 1,
                    text: '面食小吃'
                },
                {
                    id: 2,
                    text: '粥食小吃'
                }
            ]
        }
    },
    mounted() {
        this.getDataList()
    },
    created() {
        this.height = window.innerHeight - 150
        this.NewHeigh = this.height + 'px'
        console.log(this.NewHeigh)
        CommApi(this.data)
            .then((res) => {
                console.log('成功', res)
                this.$store.state.CommAdd.AddTianjia.push(res.data)
                this.dataList = this.$store.state.CommAdd.AddTianjia[0]
                console.log(this.dataList)
            })
            .catch((err) => {
                console.log('err', err)
            })
    },

    methods: {
        ...mapMutations(['CommAdd/tAddCommodity']),
        ...mapState(['CommAdd/AddTianjia']),
        back() {
            this.$router.go(-1)
        },
        fenlei() {
            this.$router.push('/CommodityMan/CommClassification')
        },

        showUp() {
            Dialog.confirm({
                message: '是否上架商品?'
            })
                .then(() => {
                    // on confirm
                    if (this.CheckedAllArr) {
                        console.log(this.CheckedAllArr)
                    } else {
                        console.log(' 失败')
                    }
                    console.log(this.CheckedAllArr)
                })
                .catch(() => {
                    // on cancel
                })
        },
        showDel() {
            Dialog.confirm({
                message: '是否删除商品?'
            })
                .then(() => {
                    // on confirm
                    if (this.CheckedAllArr) {
                        console.log(this.CheckedAllArr)
                    } else {
                        console.log(' 失败')
                    }
                })
                .catch(() => {
                    // on cancel
                })
        },
        onRightData(id) {
            console.log(id)
            this.$router.push(`/CommodityMan/CommidityCompiler/${id}`)
            this['CommAdd/tAddCommodity'](this.dataList)
        },
        onSearch(val) {
            outSuccess(val)
                .then((res) => {
                    console.log('chengon', res)
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        onCancel() {
            Toast('取消')
        },
        onActive(action) {
            console.log(action.text)
            switch (action.text) {
                case '扫描添加':
                    this.$router.push('/CommodityMan/Xiangji')
                    console.log(action.id)
                    console.log('扫描添加')
                    break
                case '手动添加':
                    this.$router.push('/CommodityMan/CommodityAdd')
                    console.log('手动添加')
                    console.log(action.id)
                    break
                case '自动录入':
                    this.$router.push('/CommodityMan/CommidityAuto')
                    console.log('自动录入')
                    console.log(action.id)
                    break

                default:
                    console.log('错误')
                    break
            }
        },
        checkAll(val) {
            let checkedCount = this.CheckedAllArr.length
            if (val) {
                //全选
                this.CheckedAllArr = this.dataList.map((item) => item.id)
            } else {
                //取消全选
                if (checkedCount === this.dataList.length) {
                    //如果不增加这个条件判断点击某一项时会全部取消
                    this.CheckedAllArr = []
                }
            }
        },
        //单选
        handleChecked() {
            this.checkAllFlag = this.CheckedAllArr.length == this.dataList.length
        },
        getDataList() {
            this.checkAllFlag = false
            this.CheckedAllArr = []
        },
        onClickNav() {
            console.log('xxx')
        },
        onClickItem() {
            console.log('333')
        },
        xiajia() {
            console.log('3333333')
        }
    },
    components: {}
}
</script>

<style lang="scss" scoped>
.header_box {
    width: 100%;
    background-color: rgba(255, 110, 83, 1);
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 16px;
    color: aliceblue;
    position: relative;
    justify-content: space-around;
}

.icon {
    left: 10px;
}

.van-button--primary {
    background: #fff;
    color: #646566;
    border: 0px;
}

.van-card {
    background: #fff;
}
</style>
